<template>
  <div  >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all form-width">
      <el-form-item :prop="id == '' ? 'account' : 'account1'" label="手机号:">
        <el-input
          v-model="form.account"
          placeholder="请输入手机号"
          :disabled="id != '' && account != ''"
        />
      </el-form-item>

      <el-form-item prop="nickname" label="昵称:">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item prop="pwd" label="登录密码:" v-if="id == ''">
        <el-input
          v-model="form.pwd"
          show-password
          placeholder="请输入登录密码"
        />
      </el-form-item>
      <el-form-item prop="parent_nam" label="上级:">
        <el-input
          v-model="form.parent_nam"
          placeholder="请输入上级(手机、编号、昵称)"
          class="form-width-n"
        />
        <el-tag v-if="form.parent_info != undefined" type="success" sex>{{
          form.parent_info.nickname
        }}</el-tag>
      </el-form-item>
      <el-form-item prop="birthday" label="生日:" >
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="level_id" label="会员等级:">
        <el-select v-model="form.level_id" placeholder="请选择">
          <el-option
            v-for="item in level_info"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" plain @click="dialogShow">升级记录</el-button>
      </el-form-item>
      <el-form-item prop="proxy_id" label="代理等级:">
        <el-select v-model="form.proxy_id" placeholder="请选择">
          <el-option
            v-for="item in proxy_info"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" plain @click="proxyDialogShow">升级记录</el-button>
      </el-form-item>
      <el-form-item prop="headimgurl" label="头像地址:">
        <upload-pic :thumb="form.headimgurl" @update:thumb="form.headimgurl=$event" width="100" cate_id="5"/>
      </el-form-item>
      <el-form-item
        prop="card_number"
        label="实名认证:"
        v-if="user_card.status == 0"
      >
        <el-tag type="danger">未申请</el-tag>
      </el-form-item>
      <div v-if="user_card.status > 0">
        <el-form-item
          prop="card_number"
          label="实名认证:"
          v-if="user_card.status < 3"
        >
          <el-button type="primary" @click="ex(3)">通过</el-button>
          <el-button type="danger" @click="ex(2)">拒绝</el-button>
          <el-tag type="danger" v-if="user_card.status == 2">已拒绝</el-tag>
        </el-form-item>
        <el-form-item
          prop="card_number"
          label="实名认证:"
          v-if="user_card.status == 3"
        >
          <el-tag type="success">已实名认证</el-tag>
        </el-form-item>
        <el-form-item prop="card_number" label="身份证号:">
          <el-input
            :disabled="true"
            v-model="user_card.card_number"
            placeholder="请输入身份证号"
          />
        </el-form-item>
        <el-form-item prop=".card_name" label="真实姓名:">
          <el-input
            :disabled="true"
            v-model="user_card.card_name"
            placeholder="请输入真实姓名"
          />
        </el-form-item>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item prop="thumb" label="身份证正面:">
              <el-popover placement="right" trigger="hover">
                <img
                  :src="user_card.thumb"
                  class="imgStyle"
                  style="max-height: 1000px; max-width: 1500px"
                />
                <img
                  slot="reference"
                  :src="user_card.thumb"
                  style="max-height: 50px; max-width: 150px"
                />
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item prop="thumb_back" label="身份证背面:">
              <el-popover placement="right" width="200" trigger="hover">
                <img :src="user_card.thumb_back" class="imgStyle" />
                <img
                  slot="reference"
                  :src="user_card.thumb_back"
                  style="max-height: 50px; max-width: 150px"
                />
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-form-item prop="sex" label="性别:">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option
            v-for="item in sex_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="balance" label="账户余额:">
        <el-input
          v-model="form.balance"
          placeholder="请输入金额"
          disabled
          class="form-width-n"
        />
        +
        <el-input
          v-model="form.change_balance"
          placeholder="增加/减少余额"
          class="form-width-n"
        />
      </el-form-item>
      <el-form-item prop="integral" :label="integral_name + '余额:'">
        <el-input
            v-model="form.integral"
            :placeholder="'请输入金额'"
            disabled
            class="form-width-n"
          />
          +
        <el-input
          v-model="form.change_integral"
          :placeholder="'增加/减少'+integral_name"
          class="form-width-n"
        />
      </el-form-item>
      <el-form-item prop="commission_balance" :label="'佣金余额:'">
        <el-input
            v-model="form.commission_balance"
            :placeholder="'请输入金额'"
            disabled
            class="form-width-n"
          />
          +
        <el-input
          v-model="form.change_commission"
          placeholder="增加/减少账户"
          class="form-width-n"
        />
      </el-form-item>

      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" />
      </el-form-item>

    </el-form>
    <drawer title="升级记录" :isShow="dialog_show"  @update:isShow="dialog_show=false" width=".5">
        <level-log :id="id" :type="type"/>
    </drawer>
   
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import LevelLog from "./components/LevelLog";
export default {
  name:'user_form',
  components: { ElImageViewer,LevelLog },
  data() {
    return {
      dialog_show: false,
      is_change: undefined,
      level_record: [],
      level_data: [],
      id: "",
      type: 0,
      account: "",
      money_data:[],
      integral_name: "积分",
      user_card: {
        id: 0,
        status: 0,
        card_name: "",
        card_number: "",
        thumb: "",
        thumb_back: "",
      },
      sex_options: [
        { value: 0, label: "未知" },
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],
      level_info: [],
      proxy_info: [],
      form: {
        id: 1,
        status: true,
        openid: "",
        unionid: "",
        account: "",
        nickname: "",
        headimgurl: "",
        pwd: "",
        pay_pwd: "",
        salt: "",
        sex: 1,
        balance: "",
        point: 0,
        idcard: "",
        integral: 0,
        realname: "",
        parent_nam: "",
      },
      rules: {
        account: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
        headimgurl: [{required: true, message: "请上传头像", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {
    //升级记录
    dialogShow() {
      this.type=0
      this.dialog_show = true;
    },
    proxyDialogShow() {
      this.type=1
      this.dialog_show = true;
    },
    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.status === true ? (form.status = 1) : (form.status = 0);
          console.log(form);
          this.get("/admin/User/save", form, "POST").then((e) => {
            console.log(e);
            if (e.status == 1) {
              this.$back();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    //通过审核
    ex(status) {
      this.get(
        "/admin/User/cardSave",
        { id: this.user_card.id, status: status },
        "POST"
      ).then((e) => {
        this.$msg_ok("success", "修改成功");
        this.user_card.status = status;
      });
    },
    bk() {
      this.$router.back();
    },
    init_into() {
      this.get("/admin/User/info?id=" + this.id, {}, "POST").then((e) => {
        const tpl = e.info.tpl;
        console.log(e);
        this.level_info = e.level_info;
        this.proxy_info = e.proxy_info;
        this.integral_name = e.integral_name;
        tpl.status === 1 || tpl.status === "" || this.id === ""
          ? (tpl.status = true)
          : (tpl.status = false);
        this.form = tpl;
        this.account=this.form.account
        console.log(this.form);
        if (e.user_card != null) {
          this.user_card = e.user_card;
        }
        setTimeout(()=>{this.is_change=false},100)
      });
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
